<template>
  <div>
    <el-dialog title="选择讲师" :append-to-body="true" @close="closeDio" :visible.sync="dialogTableVisible" width="1000px" style="padding:20px">
      <el-row class="search_prod seaheaad">
        <el-col :span="6" style="margin:10px">
          <el-input v-model="search_form.title" size="mini" placeholder="标题"></el-input>
        </el-col>
        <el-col :span="6" style="margin:10px">
          <el-input v-model="search_form.tel" size="mini" placeholder="电话"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button :loading="$store.state.isLoading" type="primary" size="mini" @click="get_tutor_list()">查询</el-button>
          <el-button :loading="$store.state.isLoading" type="danger" size="mini" @click="clear_search">清空</el-button>
        </el-col>
      </el-row>
      <el-table ref="multipleTable" :data="tutor_list.data" stripe header-row-class-name="head_color" tooltip-effect="dark" v-loading="loading"
          style="width: 100%">
        <el-table-column label="头像" min-width="80">
          <template slot-scope="scope">
            <div class="img_bor_tx">
              <img :src="$fnc.getImgUrl(scope.row.avatar)" alt />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="讲师信息" min-width="150">
          <template slot-scope="scope">
            <div class="tab_div">
              <div>
                <span>标题：</span>
                <span>{{ scope.row.title || "----" }}</span>
              </div>
              <div class="tutor_rate">
                <span>评分：</span>
                <el-rate v-model="scope.row.score" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
              </div>
              <div>
                <span>手机号：</span>
                <span>{{ scope.row.tel }}</span>
              </div>
              <div>
                <span>擅长行业：</span>
                <span>{{ scope.row.industry }}</span>
              </div>
              <div>
                <span>擅长行业2：</span>
                <span>{{ scope.row.industry2 }}</span>
              </div>
              <div>
                <span>标签：</span>
                <span>{{ scope.row.label }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="讲师信息" min-width="150">
          <template slot-scope="scope">
            <div class="tab_div">

              <div>
                <span>榜单：</span>
                <span>{{ scope.row.list }}</span>
              </div>
              <div>
                <span>热度：</span>
                <span>{{ scope.row.hot }}</span>
              </div>
              <div>
                <span>认证：</span>
                <span>{{ scope.row.authentication }}</span>
              </div>
              <div>
                <span>个人阅历：</span>
                <span>{{ scope.row.experience }}</span>
              </div>
              <div>
                <span>关注：</span>
                <span>{{ scope.row.fans }}</span>
              </div>
              <div>
                <span>粉丝：</span>
                <span>{{ scope.row.consulting }}</span>
              </div>
              <div>
                <span>获赞：</span>
                <span>{{ scope.row.get_praise }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="addShops(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="table_bottom">
          <el-col :span="24" class="tr">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
                :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tutor_list.all_num">
            </el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "xz_tutor",
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      search_form: {},
      tutor_list: [],
      currentPage1: 1,
      pageSize: 10,
      dialogTableVisible: this.show,
      loading: false
    };
  },
  created () {
    this.get_tutor_list();
  },
  methods: {
    clear_search () {
      this.currentPage1 = 1;
      this.search_form = {};
      this.get_tutor_list();
    },
    get_tutor_list (page, page_size) {
      this.loading = true;
      var params = this.search_form || {};
      params.page = page;
      params.page_size = page_size;
      this.$api.getDz.get_tutor_list(params).then(res => {
        if (res.data.code == 200) {
          this.tutor_list = res.data.result;
          this.tutor_list.data.forEach((item, i) => {
            item.score = Number(item.score);
          })
          this.loading = false;
        } else {
          this.$fnc.alertError(res.data.result);
          this.loading = false;
        }
      });
    },
    addShops (row) {
      this.$emit("sendShop", row);
      this.dialogTableVisible = false;
    },
    handleSizeChange (val) {
      this.get_tutor_list("", val);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      this.get_tutor_list(val, this.pageSize);
    },
    closeDio () {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    }
  },
  watch: {
    show (val1, val2) {
      console.log(val1);
      if (val1 == true) {
        this.get_tutor_list(1, this.pageSize);
      }
      this.dialogTableVisible = val1;
    }
  },
  computed: {}
};
</script>
<style lang="less" scoped>
.list_ul {
  height: 610px;
  overflow: auto;
}
.list_card {
  padding: 15px;
  cursor: pointer;
}
.tutor_list {
  line-height: 2;
  padding: 5px 0 0 5px;
}
.price_card {
  color: red;
}
</style>
